<template>
    <view class="box_p" @click="go()" hover-class="uni-list-cell-hover">
        <view class="imgContent" :style="{ background: menu.iconBgColor }">
			<uni-icons :type="menu.icon" custom-prefix="cpis-icon" :color="menu.iconFontColor" size="30"></uni-icons>
			<view class="count" v-if="menu.countInterface && taskCount && taskCount != '0'">{{ taskCount }}</view>
        </view>
        <view class="title">{{ menu.name }}</view>
    </view>
</template>

<script>
	import request from '@/utils/request.js'
	
	export default {
		props: {
			menu: Object
		},
		data() {
			return {
				taskCount: ''
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if(this.menu.countInterface) {
					let res = await request.common({
						url: this.menu.countInterface,
						method: this.menu.requestMode,
						pager: {
							start: 1,
							limit: 5000
						},
						params: [],
						type: 'platform',
						loading: false
					})
					if(res.data.pageResult) {
						this.taskCount = res.data.pageResult.totalCount + ""
						if(this.taskCount > 100){
							this.taskCount = "99+"
						}
					} else {
						this.taskCount = ""
					}
				}
			},
			go(){
				this.$emit("toMenu", this.menu)
			}
		}
	}
</script>

<style lang="scss">
	.box_p {
		box-sizing: border-box;
		text-align: center;
		margin: 10px 0;
		width: 25%;
	}

	.imgContent {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.count {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #f43530;
		color: #fff;
		font-size: 12px;
		padding: 3px 1px;
		box-sizing: border-box;
		transform: translate(35px, -50px);
		transform-origin: 100%;
	}

	.box_p .title {
		margin-top: 10px;
		font-size: 14px;
		color: $uni-color-subtitle;
	}
</style>
